<template xmlns:color="http://www.w3.org/1999/xhtml">
  <el-scrollbar style="height:100%">
    <div class="HomePage">
      <div class="list" v-for="i in count">
        <span class="span">{{ i.creationTime }}</span>
        <!--          //用v-for循环渲染缩略图-->
        <div class="covers">
          <div class="cover" v-for="(img,index) in i.contentImages" :key='img'>
            <el-image :src="img" width="90%"
                      class="min" :preview-src-list="i.contentImages" alt=""></el-image>
          </div>
        </div>
        <div class="content">
          <p class="testcontent">{{ i.content }}</p>
        </div>
      </div>
    </div>
  </el-scrollbar>

</template>

<script>

export default {
  name: "HomePage",
  data() {
    return {
      ShowIndex: 0,
      display: 'none',
      MinDisplay: 'flex',
      //Vue模板中使用v-for循环渲染图片时不能直接使用图片文件本地位置
      count: [{
        id: 1,
        creationTime: '2021.7.20',
        creationIp: 1,
        content: "爱神的箭阿斯卡纶就得来看啥减得快了静安寺你看大街上哪看得见那就是宽带那就是打开链接昂克赛拉多久啊女生肯定记录卡时间到了爱神的箭阿斯卡纶就得来看啥减得快了静安寺你看大街上哪看得见那就是宽带那就是打开链接昂克赛拉多久啊女生肯定记录卡时间到了爱神的箭阿斯卡纶就得来看啥减得快了静安寺你看大街上哪看得见那就是宽带那就是打开链接昂克赛拉多久啊女生肯定记录卡时间到了",
        contentImages: ['https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerbackgroundImage.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerheadPortrait.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerbackgroundImage_journal.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerheadPortrait_journal.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerbackgroundImage_photoAlbum.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerbackgroundImage_personalFile.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerheadPortrait_personalFile.png']
      }, {
        id: 2,
        creationTime: '2021.7.19',
        creationIp: 2,
        content: '/Vue模板中使用v-for循环渲染图片时不能直接使用图片文件本地位置/Vue模板中使用v-for循环渲染图片时不能直接使用图片文件本地位置',
        contentImages: ['https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerbackgroundImage.jpg']
      }, {
        id: 3,
        creationTime: '2021.7.18',
        creationIp: 2,
        content: '/Vue模板中使用v-for循环渲染图片时不能直接使用图片文件本地位置/Vue模板中使用v-for循环渲染图片时不能直接使用图片文件本地位置/Vue模板中使用v-for循环渲染图片时不能直接使用图片文件本地位置',
        contentImages: ['https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerbackgroundImage_journal.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerheadPortrait_journal.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerbackgroundImage_photoAlbum.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerbackgroundImage_personalFile.jpg', 'https://tuchuang-1303250641.cos.ap-chongqing.myqcloud.com/images/SakerheadPortrait_personalFile.png']
      }]
    }
  },

  mounted() {
    this.load()
  },
  methods: {

    modifyStatus(){
      this.$nextTick()
      console.log('成功调用子组件方法')
    },
    select(i) {
      this.ShowIndex = i;
    },
    load() {
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>


.el-scrollbar__thumb {
  display: none;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}

.HomePage {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .list {
    width: 95%;
    margin-left: 20px;
    height: 400px;
    //与边框的间距
    margin-top: 20px;
    border-radius: 40px;
    border-color: #1e1e1e;
    box-shadow: #b1afaf 2px 2px 10px 2px;

    .content {
      width: 40%;
      height: 100%;
      margin-left: 55%;
      position:static;
      padding: 10px;
      .testcontent {
        height: 88%;
        overflow: hidden;/* 超出的文本隐藏 */
        text-overflow: ellipsis; /* 溢出用省略号显示 */
        margin-top: 40px;
        //font-weight: bold;
        font-size:20px;
        font-style: italic;
        color: #a059e3;
        opacity:0.5;
        font-family: "微软雅黑","宋体","仿宋",sans-serif;
        line-height:35px;
        text-indent:2em;
        display: flex;
        align-items: center;
      }
    }

    .span {
      font-size: 24px;
      line-height: 2em; /* 行高为24px */
      right: 200px;
      float: right;
      margin-right: 20px;

    }

    .covers {
      height: 100%;
      width: 50%;
      float: left;
      //position:relative;
      position: center;
      margin-left: 5%;
      justify-content: center;
      .cover {
        margin-top: 10px;
        justify-content: center;
        width: 30%;
        height: 30%;
        float: left;
        margin-right: 10px;

        .min {
          width: 100%;
          height: 100%;
          border-radius: 10px;
          cursor: zoom-in;

        }
      }

      .active {
        margin-top: 10px;
        display: contents;
      }

      .None {
        display: none;
      }

      .smallActive {
        opacity: 1;
      }


      .max {

        cursor: zoom-out;
        width: 100%;
        height: 100px;
      }

      .small {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }

      .cover-small {
        display: flex;
        justify-content: center;
        width: 10%;
        margin: 10px 0;
        opacity: 0.6;
        cursor: pointer;
      }

      .cover-small:hover {
        opacity: 1;
      }


    }


  }
}


</style>
